<template>
  <view class="goods_list">
    <!-- 搜索框 -->
    <van-search
      shape="square"
      background="#eb4450"
      placeholder="请输入搜索关键词"
    />
    <!-- 内容 -->
    <van-tabs :active="active">
      <van-tab title="综合">
        <scroll-view
          scroll-y
          class="goods_scroll"
          refresher-enabled
          @refresherrefresh="refresherrefresh"
          @scrolltolower="scrolltolower"
          :refresher-triggered="refresherTriggered"
        >
          <navigator
            v-for="(item,index) in goods"
            :key="index"
            :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
          >
            <van-card
              custom-class="custom-class"
              title-class="title-class"
              :price="item.goods_price"
              :title="item.goods_name"
              :thumb="item.goods_small_logo||'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602496224888&di=21d967f6049ec4677a4cc1204a07fb92&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201110%2F13%2F20111013141217_uwEAS.jpg'"
            />
          </navigator>
        </scroll-view>
      </van-tab>
      <van-tab title="销量">内容 2</van-tab>
      <van-tab title="价格">内容 3</van-tab>
    </van-tabs>
  </view>
</template>

<script>
/* 
1 发送请求获取数据
2 渲染页面
  1 使用 scroll-view 
    支持下拉刷新
    支持上拉加载下一页 
  2 vant weapp 组件  card 
3 下拉加载下一页
  1 scrolltolower 上拉加载下一页事件 滚动条触底事件
  2 先判断还有没有下一页数据 
    1 如何判断 ?   
      拿当前的页码和总的页码比较  当前的页码大于等于总页码 
      当前的页码 pagenum 
      总页码 = 总条数 和 页容量来计算得出 
            = Math.ceil(总条数 /页容量 )
            Math.ceil(23/20)
            Math.ceil(43/20)
  3 有 
    1 页码 ++ 
    2 重新发送请求 来获取新的数据 
    3 当数据回来了 需要对数组做合并 
4 优化
  1 添加节流功能 
    1 上一个请求还么有结束 下一个请求就不能发送出去  (节流阀 开关)
    1.5 要开发发送请求的时候 需要把开关控制住 true
    2 当前请求结束后,需要把开关释放掉 false 
5 下拉刷新
  1 重新打开页面一样 
  2 如果用户先做了分页
    1 goods 数据里面 有数组   数组清空 
    2 页码也需要重置 (100)
 */
export default {
  data() {
    return {
      active: 0,
      // 请求需要使用的参数
      params: {
        // 分类id
        cid: null,
        // 页码
        pagenum: 1,
        // 页容量
        pagesize: 10,
      },
      // 商品列表
      goods: [],
      // 总页数
      totalPages: 0,
      // 是否正在请求中
      isLoading: false,
      // 控制下拉刷新的状态的显示
      refresherTriggered: true,
    };
  },
  onLoad(options) {
    this.params.cid = options.id;
    this.getList();
  },
  methods: {
    // 获取商品列表数据
    async getList() {
      const res = await this.get({ url: "/goods/search", data: this.params });
      console.log(res);
      // 数组合并 分页
      this.goods = [...this.goods, ...res.goods];
      // 总页数
      this.totalPages = Math.ceil(res.total / this.params.pagesize);

      // 请求结束
      // this.isLoading=false;
      console.log("c");

      /* 
      当一个函数使用 async 修饰的时候 哪怕没有返回值
      return Promise.resolve(undefined)
       */
    },

    // 下拉刷新
    async refresherrefresh() {
      this.goods = [];
      this.params.pagenum = 1;
      // 开启 下拉刷新组件的显示
      this.refresherTriggered = true;
      // 重新发送清空
      await this.getList();
      //  关闭下拉刷新组件的显示
      this.refresherTriggered = false;
    },
    // 滚动条触底 上拉页面
    async scrolltolower() {
      //  1 判断还有没有下一页数据
      if (this.params.pagenum >= this.totalPages) {
        // 没有更多数据了
        uni.showToast({ title: "没有数据了", icon: "none" });
        return;
      }

      // 1 判断有没有人正在发送请求 如果有 直接返回
      if (this.isLoading) {
        console.log("还有请求获取中 返回不再执行");
        return;
      }

      // 1.5  告诉别人 现在我要发送请求  入侵性
      this.isLoading = true;

      // 2 页码++
      this.params.pagenum++;
      // 3 重新发送请求获取数据

      console.log("a");
      await this.getList();
      console.log("b");

      // 关闭开关
      this.isLoading = false;
    },
  },
};
</script>

<style lang="less" >
.goods_scroll {
  height: calc(100vh - 98px);
}
.custom-class {
  background-color: #fff !important;
  border-bottom: 1rpx solid #ccc;
}
.title-class {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>